<template>
    <n-spin size="large" :show="loading">
        <n-space vertical :size="24">
            <n-form label-placement="left" inline :show-feedback="false">
                <n-form-item label="城市">
                    <District v-model:code="area" style="width: 200px"></District>
                </n-form-item>
                <n-form-item>
                    <n-select style="width: 300px" placeholder="请选择门店" filterable :disabled="mchs.length == 0" :options="mchs" @update:value="(v:string) => execLoadData('',v)" />
                </n-form-item>
            </n-form>
            <n-scrollbar :style="{ maxHeight: height, minHeight: height }" v-if="init">
                <n-space vertical size="large">
                    <n-card>
                        <n-tooltip placement="top-start" trigger="hover">
                            <template #trigger>
                                <n-statistic label="车辆统计">
                                    <span :style="{ fontSize: '14px' }">共</span>
                                    {{ summ.car.now.total }}
                                    <span :style="{ fontSize: '14px' }">辆车</span>
                                    <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">/</span>
                                    <span :style="{ fontSize: '14px' }">在租</span>
                                    {{ summ.car.now.rund }}
                                    <span :style="{ fontSize: '14px' }">辆车</span>
                                    <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">/</span>
                                    <span :style="{ fontSize: '14px' }">下架</span>
                                    {{ summ.car.now.down }}
                                    <span :style="{ fontSize: '14px' }">辆车</span>
                                    <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">/</span>
                                    <span :style="{ fontSize: '14px' }">空闲</span>
                                    {{ summ.car.now.idle }}
                                    <span :style="{ fontSize: '14px' }">辆车</span>
                                </n-statistic>
                            </template>
                            共计 {{ summ.car.now.total }} 辆车，在租 {{ summ.car.now.rund }} 辆车，下架 {{ summ.car.now.down }} 辆车，空闲 {{ summ.car.now.idle }}
                            辆车
                        </n-tooltip>
                    </n-card>
                    <n-card>
                        <n-tooltip placement="top-start" trigger="hover">
                            <template #trigger>
                                <n-statistic label="订单统计">
                                    <span :style="{ fontSize: '14px' }">共</span>
                                    {{ summ.order.now.total }}
                                    <span :style="{ fontSize: '14px' }">单</span>
                                    <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">/</span>
                                    <span :style="{ fontSize: '14px' }">未支付</span>
                                    {{ summ.order.now.nop }}
                                    <span :style="{ fontSize: '14px' }">单</span>
                                    <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">/</span>
                                    <span :style="{ fontSize: '14px' }">进行中</span>
                                    {{ summ.order.now.rund }}
                                    <span :style="{ fontSize: '14px' }">单</span>
                                    <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">/</span>
                                    <span :style="{ fontSize: '14px' }">未结算</span>
                                    {{ summ.order.now.nos }}
                                    <span :style="{ fontSize: '14px' }">单</span>
                                    <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">/</span>
                                    <span :style="{ fontSize: '14px' }">已完成</span>
                                    {{ summ.order.now.finish }}
                                    <span :style="{ fontSize: '14px' }">单</span>
                                    <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">/</span>
                                    <span :style="{ fontSize: '14px' }">已取消</span>
                                    {{ summ.order.now.cancel }}
                                    <span :style="{ fontSize: '14px' }">单</span>
                                </n-statistic>
                            </template>
                            共计 {{ summ.order.now.total }} 单，未支付 {{ summ.order.now.nop }} 单，进行中 {{ summ.order.now.rund }} 单，未结算 {{ summ.order.now.nos }} 单，已完成 {{ summ.order.now.finish }} 单，已取消
                            {{ summ.order.now.cancel }} 单
                        </n-tooltip>
                    </n-card>
                    <n-card>
                        <n-tooltip placement="top-start" trigger="hover">
                            <template #trigger>
                                <n-statistic label="客户统计">
                                    <span :style="{ fontSize: '14px' }">共</span>
                                    {{ summ.customer.now.total }}
                                    <span :style="{ fontSize: '14px' }">个客户</span>
                                    <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">/</span>
                                    <span :style="{ fontSize: '14px' }">在租</span>
                                    {{ summ.customer.now.lease }}
                                    <span :style="{ fontSize: '14px' }">个客户</span>
                                </n-statistic>
                            </template>
                            共计 {{ summ.customer.now.total }} 个客户，在租 {{ summ.customer.now.lease }} 个客户
                        </n-tooltip>
                    </n-card>
                    <n-card>
                        <n-tooltip placement="top-start" trigger="hover">
                            <template #trigger>
                                <n-statistic label="合同统计">
                                    <span :style="{ fontSize: '14px' }">共</span>
                                    {{ summ.contract.now.total }}
                                    <span :style="{ fontSize: '14px' }">个合同</span>
                                    <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">/</span>
                                    <span :style="{ fontSize: '14px' }">生效</span>
                                    {{ summ.contract.now.effect }}
                                    <span :style="{ fontSize: '14px' }">个合同</span>
                                    <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">/</span>
                                    <span :style="{ fontSize: '14px' }">已完成</span>
                                    {{ summ.contract.now.finish }}
                                    <span :style="{ fontSize: '14px' }">个合同</span>
                                    <span :style="{ fontSize: '14px', marginLeft: '5px', marginRight: '5px' }">/</span>
                                    <span :style="{ fontSize: '14px' }">争议中</span>
                                    {{ summ.contract.now.dispute }}
                                    <span :style="{ fontSize: '14px' }">个合同</span>
                                </n-statistic>
                            </template>
                            共计 {{ summ.contract.now.total }} 个合同，已生效 {{ summ.contract.now.effect }} 个合同，已完成 {{ summ.contract.now.finish }} 个合同，争议中 {{ summ.contract.now.dispute }} 个合同
                        </n-tooltip>
                    </n-card>
                </n-space>
            </n-scrollbar>
        </n-space>
    </n-spin>
</template>

<script lang="ts" setup>
import District from '@/comp/func/District.vue'
import { Http } from '@/libs'
import { useStore } from '@/store'
import { computed, ref, watch, onActivated } from 'vue'

const store = useStore()
const loading = computed(() => store.state.loading.flag)
const height = computed(() => store.state.browser.innerHeight - 230 + 'px')

const area = ref<any>(undefined)
watch(area, (nv, _ov) => {
    execLoadMchs(nv)
})

const mchs = ref<any>([])
const mch = ref<any>({})

const execLoadMchs = (code: any) => {
    mchs.value = []
    mch.value = {}
    Http.post('/ops/biz/merchant/info/query', {
        area: code + '',
        name: '',
    }).then(resp => {
        if (resp.stat.err > 0) {
            return
        }
        mchs.value = resp.data.items.map((m: any) => {
            return {
                label: `[${m.id}] ${m.name} - ${m.full}`,
                value: m.id,
            }
        })
    })
    execLoadData(code, '')
}

const init = ref<boolean>(false)

const summ = ref<any>()

const execLoadData = (code: any, mid: string) => {
    init.value = false
    Http.post('/ops/stat/biz/merchant/operate/summary', { area: code + '', mchid: mid + '' }).then(async resp => {
        if (resp.stat.err > 0) {
            return
        }
        summ.value = resp.data
        init.value = true
    })
}

onActivated(() => {
    execLoadData('', '')
})
</script>
